<template>
  <div class="app-container flex">
    <hello-world ref="helloworld" v-for="(item, index) in rtsp" :rtsp="item" :key="index"></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/flv/flv'
import { getAction } from '@/api/manage'
import eCharts from '@/components/eCharts'
import { agencyCountListData, eventCountListData, checkCountData, industryCompanyListData } from './echartsData'
export default {
  name: 'Analytics',
  components: { eCharts, HelloWorld },
  data() {
    return {
      rtsp: [
        // 'rtsp://admin:admin@192.168.1.19:554',

        'rtsp://admin:admin@172.56.1.2:554',
        'rtsp://admin:admin@172.56.1.3:554',
        'rtsp://admin:admin@172.40.7.4:554',

        // 'rtsp://admin:admin@172.56.1.2:554',
        // 'rtsp://admin:admin@172.56.1.3:554',
        // 'rtsp://admin:admin@172.40.7.4:554',
        // 'rtsp://admin:admin@172.56.1.2:554',
        // 'rtsp://admin:admin@172.56.1.3:554',
        // 'rtsp://admin:admin@172.40.7.4:554',
        // 'rtsp://admin:admin@172.56.1.2:554',
        // 'rtsp://admin:admin@172.56.1.3:554',
        // 'rtsp://admin:admin@172.40.7.4:554',
        // 'rtsp://admin:admin@172.56.1.2:554',
        // 'rtsp://admin:admin@172.56.1.3:554',
        // 'rtsp://admin:admin@172.40.7.4:554',
        // 'rtsp://admin:admin@172.56.1.2:554',
        // 'rtsp://admin:admin@172.56.1.3:554',
        // 'rtsp://admin:admin@172.40.7.4:554',
      ],
      statisticsCountMap: {},
      taskMostPoliceList: {
        waitTime: 3000,
        data: [],
      },
      appealPoliceCountList: {
        waitTime: 3000,
        data: [],
      },
      agencyCountOption: {},
      piedataSum: '',

      eventCountOption: {},

      targetActive: 1,
      checkCountMap: {},
      checkCountOption: {},

      industryCompanyOption: {},
    }
  },
  mounted() {
    // this.initData()
  },
  methods: {
    async initData() {
      let { result } = await getAction('/sys/statistics/total')
      // ! nav-count
      this.statisticsCountMap = result.statisticsCountMap

      // ! 完成任务最多的民警top5
      if (result.taskMostPoliceList.length == 0) {
        this.taskMostPoliceList = { data: [{ name: '暂无', value: 0 }] }
      } else {
        let data = []
        result.taskMostPoliceList.forEach((item) => {
          let obj = {}
          obj.name = item.userName + '-' + item.policeAgencyName
          obj.value = item.count
          data.push(obj)
        })
        this.taskMostPoliceList = { data }
      }

      // ! 收到头投诉最多的民警top5
      if (result.appealPoliceCountList.length == 0) {
        this.appealPoliceCountList = { data: [{ name: '暂无', value: 0 }] }
      } else {
        let data = []
        result.appealPoliceCountList.forEach((item) => {
          let obj = {}
          obj.name = item.userName + '-' + item.policeAgencyName
          obj.value = item.count
          data.push(obj)
        })
        this.appealPoliceCountList = { data }
      }

      // ! 待办事项分类
      this.piedataSum = result.agencyCountList.reduce((sum, e) => sum + e.value, 0)
      this.agencyCountOption = agencyCountListData(result.agencyCountList)

      // ! 事件统计
      this.eventCountOption = eventCountListData(result.eventCountList)

      // ! 检查次数统计
      this.checkCountMap = result.checkCountMap
      this.checkCountOption = checkCountData(this.checkCountMap.monthTaskList)

      // ! 各行业企业数据统计
      this.industryCompanyOption = industryCompanyListData(result.industryCompanyCountList, 0, 12)

      // this.startInterval(result.industryCompanyCountList)
    },

    startInterval(data) {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      let startValue = 0,
        endValue = 12
      this.timerId = setInterval(() => {
        startValue++
        endValue++
        if (endValue > data.length - 1) {
          startValue = 0
          endValue = 12
        }
        this.industryCompanyOption = industryCompanyListData(data, startValue, endValue)
      }, 3000)
    },
    changeTime(target) {
      this.targetActive = target
      if (target == 1) {
        this.checkCountOption = checkCountData(this.checkCountMap.monthTaskList)
      } else if (target == 2) {
        this.checkCountOption = checkCountData(this.checkCountMap.halfYearTaskList)
      } else if (target == 3) {
        this.checkCountOption = checkCountData(this.checkCountMap.yearTaskList)
      }
    },
  },
  destroy() {
    clearInterval(this.timerId)
  },
}
</script>

<style scoped lang="less">
.app-container {
  flex-wrap: wrap;
  background: #003433;
  .left {
    .sub-mid {
      margin: 16px 0;
      min-height: 3.36rem;
      /deep/ .row-item {
        height: 52px !important;
      }
      /deep/ .ranking-info {
        font-size: 14px;
        font-weight: 500;
        color: #509eee;
        .info-name {
          flex: auto;
          width: 3.5rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .ranking-value {
          font-size: 16px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #29e1e8;
        }
      }

      /deep/ .ranking-column {
        border-bottom: 2px solid #29e1e8;
        .inside-column {
          background: #29e1e8;
          .shine {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            background: radial-gradient(#1370fb 5%, transparent 80%);
            -webkit-animation: shine 3s ease-in-out infinite alternate;
            animation: shine 3s ease-in-out infinite alternate;
          }
        }
      }
    }

    .sub-bot {
      min-height: 3.36rem;
      /deep/ .row-item {
        height: 52px !important;
      }
      /deep/ .ranking-info {
        font-size: 14px;
        font-weight: 500;
        color: #509eee;
        .info-name {
          flex: auto;
          width: 3.5rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .ranking-value {
          font-size: 16px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #13bfff;
        }
      }

      /deep/ .ranking-column {
        border-bottom: 2px solid #13bfff;
        .inside-column {
          background: #13bfff;
          .shine {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            background: radial-gradient(#1370fb 5%, transparent 80%);
            -webkit-animation: shine 3s ease-in-out infinite alternate;
            animation: shine 3s ease-in-out infinite alternate;
          }
        }
      }
    }
  }

  .mid {
    margin: 0 10px;
    .sub-mid {
      margin: 16px 0;
      height: 3.36rem;
    }
    .sub-bot {
      height: 3.36rem;
    }

    .countNum {
      display: flex;
      align-items: center;
      padding-left: 74px;
      font-size: 16px;
      font-weight: 500;
      color: #1388ff;
      span {
        font-size: 24px;
        font-family: DIN-Medium, DIN;
        color: #aed6ff;
        margin: 0 10px;
      }
    }

    .cus-btn {
      position: absolute;
      width: 0.8rem;
      height: 0.32rem;
      line-height: 0.32rem;
      text-align: center;
      border-radius: 16px;
      background: #115398;
      border: 1px solid #1163b8;
      font-size: 12px;
      font-weight: 500;
      color: #509eee;
      cursor: pointer;
      &:nth-child(1) {
        left: 150px;
        top: 12px;
      }
      &:nth-child(2) {
        left: 245px;
        top: 12px;
      }
      &:nth-child(3) {
        left: 334px;
        top: 12px;
      }
    }
    .active {
      background: #29e1e8;
      color: #115398;
    }
  }

  .right {
    .sub-bot {
      height: 6.88rem;
    }
  }
}

.nav {
  height: 1.2rem;
  .nav-count {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 0.64rem;
      height: 0.64rem;
      margin-right: 0.12rem;
    }
    span {
      &:nth-child(1) {
        font-size: 0.16rem;
        font-weight: 500;
        color: #80b5eb;
      }
      &:nth-child(2) {
        font-size: 0.24rem;
        font-family: DIN-Medium, DIN;
        font-weight: 700;
      }
    }
    .police {
      color: #1388ff;
    }
    .position {
      color: #f5974f;
    }
    .note {
      color: #29e1e8;
    }
    .success {
      color: #5bdc26;
    }
    .faile {
      color: #ff5e5e;
    }
    .count {
      color: #e8b529;
    }
    .build {
      color: #6b65ff;
    }
  }
}

.common-title {
  display: flex;
  align-items: center;
  .icon {
    width: 8px;
    height: 8px;
    background: #1163b8;
    margin-right: 6px;
  }
  .context {
    font-size: 16px;
    font-weight: 500;
    color: #80b5eb;
  }
}

.card {
  background: #0b3763;
}

.pd-16 {
  padding: 16px;
}
</style>
